// Copyright 2015 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import '../variables';

$logs-color-black: #000;
$logs-color-white: #fff;

.kd-logs-text-color-invert {
  background-color: $logs-color-black;
  color: $logs-color-white;
}

.kd-logs-text-color {
  background-color: $logs-color-white;
  color: $logs-color-black;
}

// Base rule to be extended by logs-element rules.
%kd-logs-element-base {
  padding: 0 (2 * $baseline-grid);
  word-wrap: break-word;

  pre {
    margin: 0;
  }
}

.kd-logs-element {
  @extend %kd-logs-element-base;

  font-size: $body-font-size-base;
}

.kd-logs-element-compact {
  @extend %kd-logs-element-base;

  font-size: $caption-font-size-base;
}

.kd-log-view {
  flex: 1;
  font-family: $font-family-monospace;
  width: 100%;
}

.kd-log-line {
  white-space: pre-wrap;
}

// The style below is to make the logs view card full width & height.
kd-content-card {
  &.kd-log-content-card {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 2.5 * $baseline-grid;

    .kd-content-card {
      height: 100%;

      .kd-content-card-transclude-content {
        display: flex;
        flex: 1;

        kd-content {
          display: flex;
          flex: 1;
        }
      }
    }

    .kd-content-card-content {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }
}

.kd-logs-toolbar-select {
  display: inline-flex;
  margin: 0;

  .md-select-value {
    font-size: $title-font-size-base;
    min-width: 20 * $baseline-grid;
  }

  &:not([disabled]) {
    &:focus {
      .md-select-value {
        color: $foreground-1;
      }
    }
  }
}

.kd-logs-toolbar-button {
  min-width: unset;
}

.kd-logs-color-icon {
  background-color: $logs-color-black;
  color: $logs-color-white;
}

.kd-logs-color-icon-invert {
  background-color: $logs-color-white;
  color: $logs-color-black;
}

.kd-logs-size-icon {
  color: $logs-color-black;
}

.kd-logs-size-icon-compact {
  color: $logs-color-black;
  transform: scale(-1, 1);
}

.kd-logs-timer-icon {
  color: $logs-color-black;
}

.kd-logs-info {
  padding: 1.5 * $baseline-grid;
}

.kd-logs-style-buttons {
  float: right;
}
